<template>
  <div class="dashboard">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-left">
        <h1>EasyGo 后台管理系统</h1>
      </div>
      <div class="header-right">
        <div class="user-info">
          <span class="welcome">欢迎您，{{ currentUser.username }}</span>
          <span class="login-info">登录时间：{{ loginTime }} | 地点：{{ userLocation }}</span>
          <button @click="logout" class="logout-btn">退出系统</button>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <a href="#" class="nav-item active" @click.prevent="switchTab('home')">
            <span class="nav-icon">🏠</span>
            <span class="nav-text">系统首页</span>
          </a>
          <a href="#" class="nav-item" @click.prevent="switchTab('products')">
            <span class="nav-icon">📦</span>
            <span class="nav-text">商品管理</span>
          </a>
          <a href="#" class="nav-item" @click.prevent="switchTab('users')">
            <span class="nav-icon">👥</span>
            <span class="nav-text">用户管理</span>
          </a>
          <a href="#" class="nav-item" @click.prevent="switchTab('orders')">
            <span class="nav-icon">📊</span>
            <span class="nav-text">订单管理</span>
          </a>
          <a href="#" class="nav-item" @click.prevent="switchTab('settings')">
            <span class="nav-icon">⚙️</span>
            <span class="nav-text">系统设置</span>
          </a>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 统计卡片区域 -->
        <section class="stats-section">
          <div class="stat-card blue">
            <div class="stat-icon">📦</div>
            <div class="stat-content">
              <div class="stat-number">{{ dynamicStats.products }}</div>
              <div class="stat-label">商品数量</div>
              <div class="stat-trend" :class="getTrendClass('products')">
                {{ getTrendIcon('products') }} {{ dynamicStats.productChange }}%
              </div>
            </div>
          </div>
          <div class="stat-card green">
            <div class="stat-icon">📁</div>
            <div class="stat-content">
              <div class="stat-number">{{ dynamicStats.categories }}</div>
              <div class="stat-label">商品分类数</div>
              <div class="stat-trend" :class="getTrendClass('categories')">
                {{ getTrendIcon('categories') }} {{ dynamicStats.categoryChange }}%
              </div>
            </div>
          </div>
          <div class="stat-card orange">
            <div class="stat-icon">👁️</div>
            <div class="stat-content">
              <div class="stat-number">{{ dynamicStats.visits }}</div>
              <div class="stat-label">用户访问数</div>
              <div class="stat-trend" :class="getTrendClass('visits')">
                {{ getTrendIcon('visits') }} {{ dynamicStats.visitChange }}%
              </div>
            </div>
          </div>
          <div class="stat-card purple">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
              <div class="stat-number">{{ dynamicStats.sales }}</div>
              <div class="stat-label">今日销售额(万)</div>
              <div class="stat-trend" :class="getTrendClass('sales')">
                {{ getTrendIcon('sales') }} {{ dynamicStats.salesChange }}%
              </div>
            </div>
          </div>
        </section>

        <!-- 图表区域 -->
        <section class="charts-section">
          <!-- 销售额折线图 -->
          <div class="chart-container large">
            <div class="chart-header">
              <h3>{{ getChartTitle() }}销售额（万元）</h3>
              <div class="chart-actions">
                <button
                    v-for="period in timePeriods"
                    :key="period"
                    class="chart-btn"
                    :class="{ active: selectedPeriod === period }"
                    @click="changePeriod(period)"
                >
                  {{ period }}
                </button>
              </div>
            </div>
            <div class="chart-content">
              <div class="line-chart">
                <div class="chart-y-axis">
                  <span v-for="tick in yAxisTicks" :key="tick">{{ tick }}</span>
                </div>
                <div class="chart-area">
                  <div class="grid-lines">
                    <div v-for="i in 5" :key="i" class="grid-line"></div>
                  </div>
                  <div class="data-line">
                    <div
                        v-for="(point, index) in currentChartData"
                        :key="index"
                        class="data-point"
                        :style="{ left: `${index * (100 / (currentChartData.length - 1))}%`, bottom: `${(point / maxChartValue) * 100}%` }"
                        @mouseenter="showTooltip(index, point)"
                        @mouseleave="hideTooltip"
                    >
                      <div class="point-tooltip" v-if="activeTooltip === index">
                        {{ xAxisLabels[index] }}：¥{{ point }}万
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chart-x-axis">
                  <span v-for="label in xAxisLabels" :key="label">{{ label }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 订单数量柱状图 -->
          <div class="chart-container large">
            <div class="chart-header">
              <h3>{{ getChartTitle() }}订单数量（个）</h3>
              <div class="chart-actions">
                <button
                    v-for="period in timePeriods"
                    :key="period"
                    class="chart-btn"
                    :class="{ active: selectedPeriod === period }"
                    @click="changePeriod(period)"
                >
                  {{ period }}
                </button>
              </div>
            </div>
            <div class="chart-content">
              <div class="bar-chart">
                <div class="chart-y-axis">
                  <span v-for="tick in orderYAxisTicks" :key="tick">{{ tick }}</span>
                </div>
                <div class="chart-area">
                  <div class="grid-lines">
                    <div v-for="i in 5" :key="i" class="grid-line"></div>
                  </div>
                  <div class="bars-container">
                    <div
                        v-for="(bar, index) in currentOrderData"
                        :key="index"
                        class="bar"
                        :style="{ height: `${(bar / maxOrderValue) * 100}%` }"
                        @mouseenter="showBarTooltip(index, bar)"
                        @mouseleave="hideTooltip"
                    >
                      <span class="bar-value">{{ bar }}</span>
                      <div class="bar-tooltip" v-if="activeBarTooltip === index">
                        {{ xAxisLabels[index] }}：{{ bar }}个
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chart-x-axis">
                  <span v-for="label in xAxisLabels" :key="label">{{ label }}</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 数据表格区域 -->
        <section class="data-section">
          <div class="data-tabs">
            <button
                v-for="tab in dataTabs"
                :key="tab.id"
                class="tab-btn"
                :class="{ active: activeTab === tab.id }"
                @click="activeTab = tab.id"
            >
              {{ tab.name }}
            </button>
          </div>

          <!-- 商品管理表格 -->
          <div v-if="activeTab === 'products'" class="data-table">
            <div class="table-header">
              <h4>商品列表</h4>
              <div class="table-actions">
                <button class="add-btn" @click="addProduct">+ 新增商品</button>
                <button class="refresh-btn" @click="refreshProducts">🔄 刷新</button>
              </div>
            </div>
            <table>
              <thead>
              <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>分类</th>
                <th>价格</th>
                <th>库存</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="product in productList" :key="product.id">
                <td>{{ product.id }}</td>
                <td>{{ product.name }}</td>
                <td>{{ product.category }}</td>
                <td>¥{{ product.price }}</td>
                <td>
                    <span :class="{ 'low-stock': product.stock < 10 }">
                      {{ product.stock }}
                    </span>
                </td>
                <td>
                    <span class="status-badge" :class="product.status">
                      {{ product.status === 'active' ? '上架' : '下架' }}
                    </span>
                </td>
                <td>
                  <button class="action-btn edit" @click="editProduct(product)">编辑</button>
                  <button class="action-btn delete" @click="deleteProduct(product.id)">删除</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

          <!-- 用户管理表格 -->
          <div v-if="activeTab === 'users'" class="data-table">
            <div class="table-header">
              <h4>用户列表</h4>
              <div class="table-actions">
                <button class="add-btn" @click="addUser">+ 新增用户</button>
                <button class="refresh-btn" @click="refreshUsers">🔄 刷新</button>
              </div>
            </div>
            <table>
              <thead>
              <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="user in userList" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.registerTime }}</td>
                <td>
                    <span class="status-badge" :class="user.status">
                      {{ user.status === 'active' ? '活跃' : '禁用' }}
                    </span>
                </td>
                <td>
                  <button class="action-btn edit" @click="editUser(user)">编辑</button>
                  <button class="action-btn delete" @click="deleteUser(user.id)">删除</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </section>

        <!-- 实时数据监控 -->
        <section class="realtime-section">
          <h3>实时数据监控</h3>
          <div class="realtime-cards">
            <div class="realtime-card">
              <div class="realtime-value">{{ realtimeData.onlineUsers }}</div>
              <div class="realtime-label">在线用户</div>
              <div class="realtime-change" :class="realtimeData.userChange >= 0 ? 'up' : 'down'">
                {{ realtimeData.userChange >= 0 ? '↗' : '↘' }} {{ Math.abs(realtimeData.userChange) }}
              </div>
            </div>
            <div class="realtime-card">
              <div class="realtime-value">{{ realtimeData.ordersToday }}</div>
              <div class="realtime-label">今日订单</div>
              <div class="realtime-change" :class="realtimeData.orderChange >= 0 ? 'up' : 'down'">
                {{ realtimeData.orderChange >= 0 ? '↗' : '↘' }} {{ Math.abs(realtimeData.orderChange) }}
              </div>
            </div>
            <div class="realtime-card">
              <div class="realtime-value">¥{{ realtimeData.revenueToday }}</div>
              <div class="realtime-label">今日收入</div>
              <div class="realtime-change" :class="realtimeData.revenueChange >= 0 ? 'up' : 'down'">
                {{ realtimeData.revenueChange >= 0 ? '↗' : '↘' }} ¥{{ Math.abs(realtimeData.revenueChange) }}
              </div>
            </div>
            <div class="realtime-card">
              <div class="realtime-value">{{ realtimeData.avgResponseTime }}ms</div>
              <div class="realtime-label">平均响应</div>
              <div class="realtime-change" :class="realtimeData.responseChange <= 0 ? 'up' : 'down'">
                {{ realtimeData.responseChange <= 0 ? '↗' : '↘' }} {{ Math.abs(realtimeData.responseChange) }}ms
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 当前用户信息
const currentUser = computed(() => userStore.currentUser || { username: 'admin' })

// 动态状态数据
const dynamicStats = reactive({
  products: 500,
  categories: 20,
  visits: 121,
  sales: 15.8,
  productChange: 2.5,
  categoryChange: 0,
  visitChange: 12.3,
  salesChange: 8.7
})

// 图表数据
const selectedPeriod = ref('month')
const timePeriods = ['日', '周', '月', '年']
const activeTooltip = ref(-1)
const activeBarTooltip = ref(-1)

// 模拟动态数据
const chartData = {
  day: [3.2, 5.1, 7.8, 6.3, 8.9, 12.1, 15.8],
  week: [45.2, 52.1, 48.7, 61.3, 58.9, 67.2, 72.5],
  month: [10, 25, 40, 60, 80, 65, 75, 90, 85, 70, 55, 45],
  year: [120, 180, 220, 280, 350, 420, 380, 450, 520, 480, 550, 600]
}

const orderData = {
  day: [45, 78, 92, 67, 103, 145, 189],
  week: [320, 450, 380, 520, 480, 560, 620],
  month: [1200, 1500, 1800, 2200, 2500, 2300, 2600, 2800, 2700, 2400, 2100, 1900],
  year: [15600, 18900, 23400, 28700, 32500, 37800, 35600, 39800, 41200, 38700, 34500, 29800]
}

// 计算属性
const currentChartData = computed(() => chartData[selectedPeriod.value] || [])
const currentOrderData = computed(() => orderData[selectedPeriod.value] || [])
const maxChartValue = computed(() => Math.max(...currentChartData.value))
const maxOrderValue = computed(() => Math.max(...currentOrderData.value))
const yAxisTicks = computed(() => {
  const max = maxChartValue.value
  const ticks = []
  for (let i = 0; i <= 5; i++) {
    ticks.push(Math.round((max * i) / 5))
  }
  return ticks
})
const orderYAxisTicks = computed(() => {
  const max = maxOrderValue.value
  const ticks = []
  for (let i = 0; i <= 5; i++) {
    ticks.push(Math.round((max * i) / 5))
  }
  return ticks
})
const xAxisLabels = computed(() => {
  const data = currentChartData.value
  if (selectedPeriod.value === 'day') {
    return ['9:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00']
  } else if (selectedPeriod.value === 'week') {
    return ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  } else if (selectedPeriod.value === 'month') {
    return Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
  } else {
    return ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  }
})

// 表格数据
const activeTab = ref('products')
const dataTabs = [
  { id: 'products', name: '商品管理' },
  { id: 'users', name: '用户管理' },
  { id: 'orders', name: '订单管理' }
]

const productList = reactive([
  { id: 1, name: 'iPhone 14', category: '手机', price: 5999, stock: 45, status: 'active' },
  { id: 2, name: 'MacBook Pro', category: '电脑', price: 12999, stock: 12, status: 'active' },
  { id: 3, name: 'AirPods Pro', category: '耳机', price: 1899, stock: 89, status: 'active' },
  { id: 4, name: 'iPad Air', category: '平板', price: 4399, stock: 23, status: 'active' },
  { id: 5, name: 'Apple Watch', category: '手表', price: 2999, stock: 5, status: 'active' }
])

const userList = reactive([
  { id: 1, username: 'admin', email: 'admin@easygo.com', registerTime: '2024-01-01', status: 'active' },
  { id: 2, username: 'user001', email: 'user001@email.com', registerTime: '2024-01-10', status: 'active' },
  { id: 3, username: 'user002', email: 'user002@email.com', registerTime: '2024-01-15', status: 'inactive' },
  { id: 4, username: 'user003', email: 'user003@email.com', registerTime: '2024-01-20', status: 'active' },
  { id: 5, username: 'user004', email: 'user004@email.com', registerTime: '2024-01-25', status: 'active' }
])

// 实时数据
const realtimeData = reactive({
  onlineUsers: 156,
  ordersToday: 234,
  revenueToday: 45876,
  avgResponseTime: 128,
  userChange: 3,
  orderChange: 12,
  revenueChange: 245,
  responseChange: -5
})

// 用户信息
const loginTime = ref('')
const userLocation = ref('北京')

// 定时器引用
let statsInterval: number
let realtimeInterval: number

// 方法
const getTrendClass = (type: string) => {
  const change = dynamicStats[`${type}Change`]
  return change >= 0 ? 'trend-up' : 'trend-down'
}

const getTrendIcon = (type: string) => {
  const change = dynamicStats[`${type}Change`]
  return change >= 0 ? '📈' : '📉'
}

const getChartTitle = () => {
  const titles = { day: '今日', week: '本周', month: '本月', year: '本年' }
  return titles[selectedPeriod.value] || '本月'
}

const changePeriod = (period: string) => {
  selectedPeriod.value = period
}

const showTooltip = (index: number, value: number) => {
  activeTooltip.value = index
}

const showBarTooltip = (index: number, value: number) => {
  activeBarTooltip.value = index
}

const hideTooltip = () => {
  activeTooltip.value = -1
  activeBarTooltip.value = -1
}

const switchTab = (tab: string) => {
  console.log('切换到:', tab)
}

const updateDynamicStats = () => {
  // 模拟数据变化
  dynamicStats.products += Math.floor(Math.random() * 10) - 3
  dynamicStats.visits += Math.floor(Math.random() * 20)
  dynamicStats.sales = parseFloat((dynamicStats.sales + Math.random() * 2 - 1).toFixed(1))

  // 更新变化率
  dynamicStats.productChange = parseFloat((Math.random() * 10 - 2).toFixed(1))
  dynamicStats.visitChange = parseFloat((Math.random() * 15 - 2).toFixed(1))
  dynamicStats.salesChange = parseFloat((Math.random() * 12 - 2).toFixed(1))
}

const updateRealtimeData = () => {
  realtimeData.onlineUsers += Math.floor(Math.random() * 10) - 5
  realtimeData.ordersToday += Math.floor(Math.random() * 5)
  realtimeData.revenueToday += Math.floor(Math.random() * 1000)
  realtimeData.avgResponseTime = Math.floor(Math.random() * 50) + 100

  // 更新变化值
  realtimeData.userChange = Math.floor(Math.random() * 10) - 2
  realtimeData.orderChange = Math.floor(Math.random() * 8) - 1
  realtimeData.revenueChange = Math.floor(Math.random() * 500) - 100
  realtimeData.responseChange = Math.floor(Math.random() * 20) - 10
}

const addProduct = () => {
  const newProduct = {
    id: productList.length + 1,
    name: `新产品${productList.length + 1}`,
    category: '其他',
    price: Math.floor(Math.random() * 1000) + 100,
    stock: Math.floor(Math.random() * 100),
    status: 'active'
  }
  productList.push(newProduct)
  dynamicStats.products = productList.length
}

const deleteProduct = (id: number) => {
  const index = productList.findIndex(p => p.id === id)
  if (index !== -1) {
    productList.splice(index, 1)
    dynamicStats.products = productList.length
  }
}

const editProduct = (product: any) => {
  console.log('编辑商品:', product)
}

const refreshProducts = () => {
  // 模拟刷新数据
  productList.forEach(product => {
    product.stock = Math.max(0, product.stock + Math.floor(Math.random() * 10) - 3)
  })
}

const addUser = () => {
  const newUser = {
    id: userList.length + 1,
    username: `user${String(userList.length + 1).padStart(3, '0')}`,
    email: `user${userList.length + 1}@email.com`,
    registerTime: new Date().toISOString().split('T')[0],
    status: 'active'
  }
  userList.push(newUser)
}

const deleteUser = (id: number) => {
  const index = userList.findIndex(u => u.id === id)
  if (index !== -1) {
    userList.splice(index, 1)
  }
}

const editUser = (user: any) => {
  console.log('编辑用户:', user)
}

const refreshUsers = () => {
  // 模拟刷新用户状态
  userList.forEach(user => {
    if (Math.random() > 0.8) {
      user.status = user.status === 'active' ? 'inactive' : 'active'
    }
  })
}

const logout = () => {
  if (confirm('确定要退出系统吗？')) {
    userStore.logout()
    router.push('/')
  }
}

// 生命周期
onMounted(() => {
  // 设置登录时间
  loginTime.value = new Date().toLocaleString('zh-CN')

  // 启动定时器更新数据
  statsInterval = window.setInterval(updateDynamicStats, 5000)
  realtimeInterval = window.setInterval(updateRealtimeData, 3000)

  // 模拟获取用户位置
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        () => { userLocation.value = '自动定位' },
        () => { userLocation.value = '北京（默认）' }
    )
  }
})

onUnmounted(() => {
  if (statsInterval) clearInterval(statsInterval)
  if (realtimeInterval) clearInterval(realtimeInterval)
})
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background: #f5f6fa;
}

/* 顶部导航栏 */
.top-header {
  background: white;
  padding: 0 30px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-bottom: 1px solid #e8e8e8;
}

.header-left h1 {
  margin: 0;
  color: #1890ff;
  font-size: 20px;
  font-weight: 600;
}

.header-right .user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome {
  color: #333;
  font-weight: 500;
}

.login-info {
  color: #666;
  font-size: 12px;
}

.logout-btn {
  padding: 6px 16px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.logout-btn:hover {
  background: #ff7875;
}

/* 主容器 */
.main-container {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* 侧边栏 */
.sidebar {
  width: 200px;
  background: #001529;
  padding: 20px 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #a0a0a0;
  text-decoration: none;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.nav-item:hover, .nav-item.active {
  background: #1890ff;
  color: white;
  border-left-color: #52c41a;
}

.nav-icon {
  margin-right: 10px;
  font-size: 16px;
}

.nav-text {
  font-size: 14px;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* 统计卡片区域 */
.stats-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 24px;
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-card.blue { background: linear-gradient(135deg, #1890ff, #096dd9); }
.stat-card.green { background: linear-gradient(135deg, #52c41a, #389e0d); }
.stat-card.orange { background: linear-gradient(135deg, #fa8c16, #d46b08); }
.stat-card.purple { background: linear-gradient(135deg, #722ed1, #391085); }

.stat-icon {
  font-size: 48px;
  margin-right: 16px;
  opacity: 0.9;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
  font-weight: 600;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

/* 图表区域 */
.charts-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-container.large {
  grid-column: 1 / -1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-btn {
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.chart-btn.active {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}

.chart-btn:hover {
  background: #40a9ff;
  color: white;
}

/* 折线图样式 */
.line-chart {
  display: flex;
  height: 300px;
  position: relative;
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  font-size: 12px;
  color: #666;
  text-align: right;
  padding-right: 10px;
}

.chart-area {
  flex: 1;
  position: relative;
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-line {
  border-top: 1px solid #f0f0f0;
}

.data-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.data-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1890ff;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;
  z-index: 10;
}

.data-point::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #1890ff22;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.point-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.point-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.9);
}

.chart-x-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

/* 柱状图样式 */
.bar-chart {
  display: flex;
  height: 300px;
}

.bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 0 20px;
}

.bar {
  width: 30px;
  background: linear-gradient(to top, #1890ff, #69c0ff);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: height 0.3s;
  cursor: pointer;
}

.bar:hover {
  background: linear-gradient(to top, #40a9ff, #91d5ff);
}

.bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #333;
  font-weight: bold;
}

.bar-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 数据表格区域 */
.data-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 24px;
}

.data-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.tab-btn.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header h4 {
  margin: 0;
  color: #333;
}

.table-actions {
  display: flex;
  gap: 12px;
}

.add-btn {
  padding: 8px 16px;
  background: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.add-btn:hover {
  background: #73d13d;
}

.refresh-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn:hover {
  background: #40a9ff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.inactive {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.low-stock {
  color: #ff4d4f;
  font-weight: bold;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
  transition: all 0.3s;
}

.action-btn.edit {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.action-btn.edit:hover {
  background: #bae7ff;
}

.action-btn.delete {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.action-btn.delete:hover {
  background: #ffccc7;
}

/* 实时数据监控 */
.realtime-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.realtime-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.realtime-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.realtime-card {
  text-align: center;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
  position: relative;
}

.realtime-value {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8px;
}

.realtime-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.realtime-change {
  font-size: 12px;
  font-weight: 600;
}

.realtime-change.up {
  color: #52c41a;
}

.realtime-change.down {
  color: #ff4d4f;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .realtime-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: 1fr;
  }

  .realtime-cards {
    grid-template-columns: 1fr;
  }

  .header-right .user-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }

  .data-tabs {
    overflow-x: auto;
  }

  .tab-btn {
    white-space: nowrap;
  }

  .table-actions {
    flex-direction: column;
    gap: 8px;
  }
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.realtime-card:hover {
  animation: pulse 0.5s ease-in-out;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>